<template>
	<view class="c-book-recommend-section mb20">
		<m-swiper :list="carouselList"></m-swiper>
		
		<uni-grid :data="grid" :columnNum=4 show-border="false" @click="handleClickGrid"></uni-grid>
		
		<m-ad :list="adList"></m-ad>
		
		<!-- 拼团楼层 -->
		<view class="seckill-section m-t">
			<view class="s-header" @click="navToGroupShop">
				<image class="s-img" src="/static/temp/h1.png"></image>
				<text class="tip">超级拼团</text>
				<text class="yticon icon-you"></text>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view 
						v-for="(item, index) in groupShopList" :key="index"
						class="floor-item"
						@click="navToGroupShopDetail(item.spuId,item.id)">
						<image :src="item.img" mode="aspectFill"></image>
						<text class="price clamp" style="float: left;">￥{{item.price}}</text>
						<text class="price clamp" style="float: left;padding-left: 10px;">{{item.title}}</text>
						<text class="title clamp gp-btn">立即拼团</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="fx-product">
			<view class="title">
				分销精品推荐
			</view>
			
			<view class="content c-book-fullTextRecommended">
				<view tyle="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)" v-for="(item, index2) in distributionGoodsList" :key="index2" class="clearfix fx-view" 
				@click="navToProductDistribution(item.img,item.title,item.distributionQr)">
					<view class="cover">
						<image alt="" :src="item.img"></image>
						<view class="is-vip"></view>
					</view>
					<view class="right">
						<view class="name">
							<view>{{item.title}}</view>
						</view>
						 
						<view class="desc">{{item.description}}</view>
						<view class="sku">
							<view class="tag">
								<view>分销价￥{{item.price/100.0}}</view>
								<view>去分销</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import mSwiper from "@/components/m-swiper/m-swiper.vue"
import uniGrid from "@/components/uni-grid/uni-grid.vue"
import mAd from "@/components/m-ad/m-ad.vue"
import { mapState } from 'vuex'

export default {
	components: {
		mSwiper,
		uniGrid,
		mAd
		},
	data() {
		return {
			info: '小程序测试提示暂时不能领取开发任务',
			title: '任务',
			bigIdx: 1,
			carouselList: [],
			grid: [{
					image: "/static/img/task/grid-1.png",
					text: '抽奖',
					path: "/pages/choujiang/index"
				}, {
					image: "/static/img/task/grid-2.png",
					text: '邀请',
					path: "/pages/share/pic-share"
				}, {
					image: "/static/img/task/grid-3.png",
					text: '签到',
					path: "/pages/signin/signin"
				}, {
					image: "/static/img/task/grid-3.png",
					text: '优惠券',
					path: "/pages/coupon/coupon"
				}],
			adList: [],
			groupShopList:[],
			distributionGoodsList: []
		}
	},
	computed:{
		...mapState(['hasLogin','userInfo']),
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		async loadData() {
			const that = this
			uni.showLoading({
				title: '正在加载'
			})
			that.$api.request('integral', 'getIndexData', failres => {
				that.$api.msg(failres.errmsg)
				uni.hideLoading()
			}).then(res => {
				let data = res.data
				data.windowRecommend
				//轮播
				if(data.advertisement){
					if(data.advertisement.t1){
						data.advertisement.t1.forEach(item => {
							item.src = item.imgUrl
						})
						console.log(data.advertisement.t1)
						that.carouselList = data.advertisement.t1
					}
					//分销精品推荐
					//分类精选
					if (data.advertisement.t2) {
						that.categoryPickList = data.advertisement.t2
					}
					//横幅广告
					if (data.advertisement.t5 && data.advertisement.t5.length > 0) {
						that.adList = data.advertisement.t5
					}
				}
				uni.hideLoading()
			})
			that.$api.request('groupshop', 'getGroupShopPage', {
				pageNo: that.pageNo
			}).then(res => {
				that.pageNo = res.data.pageNo + 1
				that.loadingType = res.data.pageNo < res.data.totalPageNo ? 'more' : 'nomore'
				res.data.items.forEach(item => {
					that.groupShopList.push(item);
				})
			})
			
			that.$api.request('goods', 'distributionGoodsList', {
				pageNo: that.pageNo,
				openId: this.userInfo.openid
			}).then(res => {
				res.data.items.forEach(item => {
					that.distributionGoodsList.push(item);
				})
			})
		},
		swiperChange(e) {
			this.bigIdx = e.detail.current
		},
		
		handleClickGrid(o) {
			if(this.grid[o.index].path == "/pages/share/pic-share"){
				this.$api.request('distribution', 'inviteQr', {
					inviterOpenId: this.userInfo.openId
				}, failres => {
					this.$api.msg(failres.errmsg)
					return
				}).then(res => {
					uni.navigateTo({
					    url: this.grid[o.index].path,
					})
				})
			}else{
				uni.navigateTo({
				    url: this.grid[o.index].path,
				})
			}
		},
		
		navToProductDistribution(img,title,distributionQr){
			uni.navigateTo({
			    url: decodeURI('../product/distribution?imgSrc='+ img + '&Title='+ title +'&qrSrc='+ distributionQr)
			})
		},
		
		navToGroupShopDetail(id,gid){
			uni.navigateTo({
			    url: '/pages/groupshop/detail?id='+id+'&gid='+gid
			})
		},
		
		navToGroupShop(){
			uni.navigateTo({
			    url: '/pages/groupshop/list'
			})
		}
		
	}
};
</script>

<style lang="scss">
@import '../../static/css/book.css';
.content {
	text-align: center;
	margin-top: -5px;
}
.gp-btn{
	background: #fd6d6d;
	font-style: normal;
	font-size: 12px !important;
	border-radius: 5px;
	width: 70px !important;
	height: 20px !important; 
	color: #fff !important;
	clear: both;
	margin: 0 auto;
}
.fx-product{
	background: #fff;
}
.clearfix{
	border-bottom: 1px solid #EFEFF4;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
.uni-swiper-wrapper{
	border-bottom: 1px solid #EFEFF4;
}

* {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

html,body{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@function realSize($args) {
		@return $args / 1.5;
	}

	.page_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header {
		padding-top: var(--status-bar-height);
		width: 95%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 10px;
		margin-right: 10px;

		.btn {
			width: 27px;
			height: 27px;
		}

		.title {
			font-size: 16px;
			font-weight: bold;
			color: rgba(43, 43, 43, 1);
			line-height: 41px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.logo {
		margin-top: 10px;
		width: 100px;
		height: 100px;
	}

	.swiper {
		width: 100%;
		margin-top: 10px;

		.swiper-item {
			border-radius: 16px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-left: 10px;
			margin-right: 10px;
		}

		.big {
			margin-top: 0;

			.img {
				margin-top: 15px;
				width: 40px;
				height: 40px;
			}

			.title {
				font-size: 25px;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 41px;
			}

			.sub_title {
				font-size: 11px;
				font-weight: 300;
				color: rgba(255, 255, 255, 1);
				line-height: 41px;
			}
		}

		.small {
			margin-top: 14px;
			height: 75%;

			// transition: all 0.3s;
			.img {
				margin-top: 5px;
				width: 25px;
				height: 25px;
			}

			.title {
				font-size: 15px;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 31px;
			}

			.sub_title {
				font-size: 7px;
				font-weight: 300;
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	.title_line {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.title {
			margin-left: 20px;
			font-size: 18px;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 41px;
		}

		.more {
			margin-right: 20px;
			font-size: 10px;
			font-weight: 300;
			color: rgba(153, 153, 153, 1);
			line-height: 41px;
		}
	}

	.slider {
		white-space: nowrap;
		width: 100%;

		.s_item {
			display: inline-block;
			width: 35%;
			margin-left: 20px;
			margin-bottom: 10px;

			.content {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 8px;
				background: white;
				margin-top: 5px;
				box-shadow: 0px 2px 6px 0px rgba(103, 103, 103, 0.2);

				.img {
					width: 103px;
					height: 105px;
				}

				.name {
					margin-top: -10px;
					font-size: 12px;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					line-height: 21px;
				}

				.desc {
					font-size: 10px;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					line-height: 21px;
				}

				.btn {
					width: 80px;
					height: 30px;
					margin-bottom: 10px;
					background: linear-gradient(94deg, rgba(192, 160, 105, 1), rgba(233, 213, 172, 1));
					box-shadow: 0px 9px 28px 0px rgba(195, 164, 110, 0.23);
					border-radius: 29px;
					font-size: 12px;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					line-height: 21px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.swiper{
		border-bottom: solid 1px #e1dcdc
	}
	.title {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80upx;
		color: #f47825;
		font-size: 30upx;
	}
	
	/* 拼团专区 */
	.seckill-section{
		padding: 4upx 30upx 4upx;
		background: #fff;
		margin: 5px 0px;
		.s-header{
			display:flex;
			align-items:center;
			height: 92upx;
			line-height: 1;
			.s-img{
				width: 30px;
				height: 30px;
			}
			.tip{
				font-size: 16px;
				color: $font-color-light;
			}
			.timer{
				display:inline-block;
				width: 40upx;
				height: 36upx;
				text-align:center;
				line-height: 36upx;
				margin-right: 14upx;
				font-size: $font-sm+2upx;
				color: #fff;
				border-radius: 2px;
				background: rgba(0,0,0,.8);
			}
			.icon-you{
				font-size: $font-lg;
				color: $font-color-light;
				flex: 1;
				text-align: right;
			}
		}
		.floor-list{
			white-space: nowrap;
		}
		.scoll-wrapper{
			display:flex;
			padding-bottom: 10px;
			align-items: flex-start;
		}
		.floor-item{
			width: 320upx;
			margin-right: 20upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			line-height: 1.8;
			image{
				width: 320upx;
				height: 150upx;
				border-radius: 6upx;
			}
			.price{
				color: $uni-color-primary;
			}
		}
	}
	
	/* 猜你喜欢 */
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}
		.price{
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
		}
	}
	
</style>
